//引入node中的path模块，处理文件路径的小工具(动态获取路径)
var path=require("path");
//引入插件
var HtmlWebpackPlugin = require("html-webpack-plugin");
//导出一个webpack具有特殊属性配置的对象
module.exports={
    //配置环境 production development none
    mode:"none",
    //入口
    entry:"./src/main.js",
    //出口
    output:{
        //path 出口路径，要指定绝对路径
        path:path.join(__dirname,"./dist/"), //打包结果生成的目录是绝对路径
        filename:"bundle.js",
    },
    //配置插件
    plugins:[
        new HtmlWebpackPlugin({
            //指定要打包的模板页面
            //会将index.html打包到与bundle.js同级目录下
            //同时index.html会自动引入bundle.js
            template:"./index.html",
        })
    ],
    //实时重新加载
    devServer:{
        //目标路径
        contentBase:"./dist"
    },
    module:{
        rules:[ //配置转换规则
            {
                test:/\.css$/, //正则表达式(不能加双引号修饰，不然会视为字符串)
                use:[
                    "style-loader", //js识别css
                    "css-loader" //css 转换为js
                ]
            },
            {
                test:/\.(png|jpg|jpeg|gif|svg)$/,
                use:[
                    "file-loader", //图片打包
                ]
            }
        ]
    }
}